<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" tab-position="left" @tab-click="changeTab">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name" :label="tab.title">
        <component :is="activeTab" v-if="activeTab === tab.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Basic from './security-components/Basic'
import BusinessType from './security-components/BusinessType'
import Promise from './security-components/Promise'
import SecurityProduct from './security-components/SecurityProduct'
import Risk from './security-components/Risk'

export default {
  name: 'SecurityCard',
  components: { Basic, BusinessType, Promise, SecurityProduct, Risk },
  props: {
    certNo: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeTab: 'basic',
      tabs: [
        { title: '安全生产基础信息', name: 'basic' },
        { title: '安全企业行业类型', name: 'businessType' },
        { title: '安全承诺信息', name: 'promise' },
        { title: '安全生产基础信息', name: 'securityProduct' },
        { title: '较大以上安全风险信息', name: 'risk' }
      ]
    }
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab.name
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

::v-deep .information-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  &.align-right tr td:nth-child(2n+1) {
    text-align: right;
  }
  tr td {
    padding: 8px 0;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    &:nth-child(2n+1) {
      width: 80px;
      padding-right: 10px;
      color: $label-color;
    }
  }
}
</style>
